/**
 * Created by zhr on 2017/6/27.
 */
import React from "react";
import {hashHistory,Link} from 'react-router';
import Relay from "react-relay";
import Util from "../../../../../../util/Util";
import { Table } from 'antd';
import { Button } from 'fly';
export default class Tab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentInx: 0,
            hasSize: false,
            planDate: '',
            planOut: '',
            planFinished: '',
            samplePlanModels: this.props.samplePlanModels || '',
            arrowLeft: '55px',
        }
        // this.tabClick = this.tabClick.bind(this)
    }
    tabClick(Inx,sampleId) {
        sampleId == 4 ? (
           this.hasSize(true)
        ) : (
            this.hasSize(false)
        )
        this.setState({
            arrowLeft: Inx*110 + 55
        })
        this.setState({
            currentInx: Inx,
        })
    }
    componentWillMount(){

    }
    hasSize(size) {
        if (size) {
            return true;
        }
        if (this.props.samplePlanModels && this.props.samplePlanModels.length && this.props.samplePlanModels[this.state.currentInx].sampleId == 4) {
            return true;
        } else {
            return false;
        }

    }
    render() {
        const columns = [
            {
                title: '品名',
                dataIndex: 'productName',
                key: 'productName',
            },
                {
                title: '款号',
                dataIndex: 'styleNo',
                key: 'styleNo',
            },
                {
                title: '进度',
                dataIndex: 'statusDesc',
                key: 'statusDesc',
            }
        ];
        const columns_size = [
            {
                title: '品名',
                dataIndex: 'productName',
                key: 'productName',
            },
            {
                title: '款号',
                dataIndex: 'styleNo',
                key: 'styleNo',
            },
            {
                title: '尺码',
                dataIndex: 'size',
                key: 'size',
                render:(text,record)=>{
                    return JSON.parse(record.size).join(',')
                }
            },
                {
                title: '进度',
                dataIndex: 'statusDesc',
                key: 'statusDesc',
            }
        ];
        const { hasSize,currentInx } = this.state;
        // this.props.samplePlanModels
        const samplePlanModels = this.props.samplePlanModels;
        return (
            <div className="cp_header_tab">
                <div>
                    <ul className="cp_header_tab_ul">
                        {
                            samplePlanModels && samplePlanModels.length ? samplePlanModels.map((v,i) =>{
                                return v.status == 0 ? (
                                    <li onClick={v.isClick == 1 || i == 0 ? this.tabClick.bind(this,i,v.sampleId) : null}>
                                        <a style={{cursor: 'default'}} className={'icons_'+v.sampleId}></a>
                                        {
                                            currentInx == i ? <span style={{cursor: 'default',color:'#36b3b3'}}>{v.name}</span> : <span style={{cursor: 'default'}}>{v.name}</span>
                                        }
                                    </li>
                                ) : (
                                    <li onClick={this.tabClick.bind(this,i,v.sampleId)}>
                                        {
                                            v.status ==  1 ? <a className={'icons_finished'+v.sampleId}></a> : <a className={'icons_active'+v.sampleId}></a>
                                        }
                                        {
                                            currentInx == i ? <span style={{color:'#36b3b3'}}>{v.name}</span> : <span>{v.name}</span>
                                        }
                                    </li>
                                )
                            }) : null
                        }
                    </ul>
                    <div className="cp_clearfix cp_header_tab_detail">
                        {
                            samplePlanModels && samplePlanModels.length && samplePlanModels.length < 7 ? (
                                <span className="org_bot_cor" style={{left: this.state.arrowLeft}}></span>
                            ) : null
                        }
                        <p className="cp_header_tab_detail_title">
                            <span>计划交期：{samplePlanModels && samplePlanModels.length && Util.dateFormat(samplePlanModels[currentInx].deliveryDate)}</span>
                            {
                                this.props.samplePlanModels && this.props.samplePlanModels.length && this.props.samplePlanModels[this.state.currentInx].status == 0 ? (
                                    <span>打样未开始</span>
                                ) : (
                                    this.props.samplePlanModels && this.props.samplePlanModels.length && this.props.samplePlanModels[this.state.currentInx].status == 1 ? (
                                        <a><span style={{cursor: 'default'}}>{this.props.samplePlanModels[this.state.currentInx].startNum}款开始打样</span>
                                            <span style={{cursor: 'default'}}>{this.props.samplePlanModels[this.state.currentInx].sendNum}款制衣厂已寄出</span>
                                           <span style={{cursor: 'default'}}>{this.props.samplePlanModels[this.state.currentInx].finishNum}款完成打样</span></a>
                                    ): (
                                         <span>打样已完成</span>
                                    )
                                )
                            }
                        </p>
                        <Table
                            dataSource={samplePlanModels && samplePlanModels.length && samplePlanModels[currentInx].goodsList}
                            columns={this.hasSize() ? columns_size : columns}
                            className='order_table'
                            pagination={false}
                        />
                        <br/>
                        <div style={{textAlign:'center'}}><Button onClick={this.props.showDetail.bind(this,this.state.currentInx,this.state.hasSize,this.state.arrowLeft)}>详情</Button></div>
                    </div>
                </div>
            </div>
        )

    }
}